<template>
  <view>
    <!-- 原来的头部 -->
    <!-- <view class="address">
      <view class="address_head">
        <view class="title">
          {{ t("My shipping address") }}
        </view>
        <view class="icon" @click="goToView('/pages/user/addressDeit')">
          <image
            class="icon_img"
            src="/static/images/detail.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
      <view class="address_info">
        <view class="address_img">
          <image
            class="img"
            src="/static/images/logo.png"
            mode="aspectFit"
          ></image>
        </view>
        <view class="address_info_detail">
          <view class="postCode"> {{ addressInfo.StoreName }}</view>
          <view class="address_info_item">
            {{ t("consignee") }}: {{ addressInfo.name }}
          </view>
          <view class="address_info_item">
            {{ t("phone") }}:{{ addressInfo.phone }}
          </view>
          <view class="address_info_item">
            {{ t("address") }}：{{ addressInfo.address }}
          </view>
        </view>
      </view>
    </view> -->
    <view class="ability order">
      <view
        class="ability_item"
        v-for="(item, i) in orderActions"
        @click="item.fun"
        :key="i"
      >
        <view class="ability_item_box">
          <view class="ability_title">
            <image class="img" :src="item.icon" mode="aspectFit" />
            {{ item.title }}
          </view>
          <view>20</view>
        </view>
        <view class="icon flip">
          <uv-icon name="/static/images/user/right.png" size="14"></uv-icon>
        </view>
      </view>
    </view>

    <view class="ability account">
      <view
        class="ability_item"
        v-for="(item, i) in accountActions"
        @click="item.fun"
        :key="i"
      >
        <view class="ability_item_box">
          <view class="ability_title">
            <image class="img" :src="item.icon" mode="aspectFit" />
            {{ item.title }}
          </view>
          <view>20</view>
        </view>
        <view class="icon flip">
          <uv-icon name="/static/images/user/right.png" size="14"></uv-icon>
        </view>
      </view>
    </view>
    <view class="switch">
      <view class="switch_item" @click="goToView('/pages/index/storeList')">
        <view class="switch_item_box">
          <image
            class="img"
            src="/static/images/login/switchStore.png"
            mode="aspectFit"
          ></image>
          <view class="title"> Switch store </view>
        </view>
        <view class="icon flip">
          <uv-icon name="/static/images/user/switch.png" size="14"></uv-icon>
        </view>
      </view>
      <view
        class="switch_item"
        v-if="deviceStore.lang == 'en-US'"
        @click="lang('Arab')"
      >
        <view class="switch_item_box">
          <image
            class="img"
            src="/static/images/a.png"
            mode="aspectFit"
          ></image>
          <view class="title"> تبديل العربية </view>
        </view>
        <view class="icon flip">
          <!-- <uv-icon name="arrow-right" size="18" color="#bdbebf"></uv-icon> -->
          <uv-icon name="/static/images/user/right.png" size="14"></uv-icon>
        </view>
      </view>
      <view class="switch_item" v-else @click="lang('en-US')">
        <view class="switch_item_box">
          <image
            class="img"
            src="/static/images/e.png"
            mode="aspectFit"
          ></image>
          <view class="title">Switch to English</view>
        </view>
        <view class="icon flip">
          <uv-icon name="/static/images/user/right.png" size="14"></uv-icon>
        </view>
      </view>
    </view>

    <view class="ability">
      <view
        class="ability_item"
        v-for="(item, i) in abilityList"
        @click="item.fun"
        :key="i"
      >
        <view class="ability_item_box">
          <view
            :class="['ability_title', item.title_tip && 'has_tip']"
            :style="'color:' + item.color"
          >
            {{ item.title }}
            <view v-if="item.title_tip" class="ability_title_tip">{{
              item.title_tip
            }}</view>
          </view>
          <view class="ability_tip" :style="'color:' + item.tip_color">
            {{
              item.type === "Notification"
                ? isAllowNotify
                  ? t("Enable")
                  : t("Disable")
                : item.tip
            }}
          </view>
        </view>

        <view class="icon flip">
          <uv-icon
            v-if="item.icon"
            :name="item.icon"
            size="14"
            color="#bdbebf"
          ></uv-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { useI18n } from "vue-i18n";
import { useUserStore, useDeviceStore } from "@/store";
import { useLanguageSwitcher } from "@/locale/setLang";

const { switchLang } = useLanguageSwitcher();
const { t } = useI18n();
const langSelect = {
  0: "en-US",
  1: "Arab",
};

// 是否允许通知
const isAllowNotify = ref(true);
const userStore = useUserStore();
const deviceStore = useDeviceStore();
const addressInfo = ref({});
const abilityList = ref([
  {
    title: t("Notification"),
    tip: t("Enable"),
    type: "Notification",
    tip_color: "#1AAD19",
    icon: "/static/images/user/right.png",
    color: "",
    fun: () => {
      if (!isAllowNotify.value) {
        uni.openAppAuthorizeSetting();
      }
    },
    isAllowNotify,
    title_tip: t("Account, order, support, and promotions"),
  },
  {
    title: t("current version"),
    tip: t("V5.5.5 (Latest)"),
    icon: "",
    color: "",
    fun: "",
  },
  {
    title: t("Clear Cache"),
    tip: "3.2M",
    icon: "/static/images/user/right.png",
    color: "",
    fun: "",
  },
  {
    title: t("Log Out"),
    tip: "",
    icon: "",
    color: "red",
    fun: () => outLogin(),
  },
]);

const orderActions = ref([
  {
    title: t("All Orders"),
    icon: "/static/images/user/order.png",
    fun: () => {
      uni.navigateTo({
        url: "/pages/order/order",
      });
    },
  },
  {
    title: t("Pre-sale orders"),
    icon: "/static/images/user/order_a.png",
    fun: () => {
      uni.navigateTo({
        url: "/pages/order/order?type=pre-sale",
      });
    },
  },
]);
const accountActions = ref([
  {
    title: t("Account Info"),
    icon: "/static/images/user/account_a.png",
    fun: () => {
      uni.navigateTo({
        url: "/pages/user/accountInfo/index",
      });
    },
  },
  {
    title: t("Sub-Account Management"),
    icon: "/static/images/user/account.png",
    fun: () => {
      uni.navigateTo({
        url: "/pages/user/accountManage/index",
      });
    },
  },
]);

onShow(() => {
  let address = uni.getStorageSync("address");
  if (address) {
    addressInfo.value = address;
  }
});
onMounted(() => {
  // #ifdef APP-PLUS
  isAllowNotify.value =
    uni.getAppAuthorizeSetting().notificationAuthorized === "denied"
      ? false
      : true;
  // #endif
});

const lang = (lang) => {
  switchLang(lang);
  uni.reLaunch({
    url: "/pages/user/user",
  });
};
const outLogin = () => {
  uni.showModal({
    title: t("Tip"),
    content: t("Do you want to log out"),
    cancelText: t("Cancel"),
    confirmText: t("Confirm"),
    complete: (res) => {
      if (res.confirm) {
        deviceStore.setShop({});
        uni.removeStorageSync("MyShop");
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
    },
  });
};
const goToView = (path) => {
  uni.navigateTo({
    url: path,
  });
};
</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

.switch {
  margin: 0 10rpx;

  .switch_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .switch_item_box {
      display: flex;
      align-items: center;

      .img {
        width: 60rpx;
        height: 60rpx;
      }

      .title {
        margin: 0 20rpx;
      }
    }

    .icon {
      // width: 50rpx;
    }
  }
}

.address {
  margin: 20rpx 10rpx;
  background: #fff;
  border-radius: 10rpx;
  padding: 20rpx 10rpx;

  .address_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f6f6f6;
    padding: 10rpx 10rpx 20rpx;
    margin-bottom: 20rpx;

    .title {
      font-size: 28rpx;
    }

    .icon {
      width: 40rpx;

      .icon_img {
        width: 100%;
      }
    }
  }

  .address_info {
    display: flex;

    .address_img {
      width: 200rpx;
      height: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .img {
        max-width: 70%;
        max-height: 70%;
      }
    }

    .address_info_detail {
      flex: 1;
      font-size: 24rpx;

      .postCode {
        padding: 5rpx 10rpx;
        border-radius: 5rpx;
        background: $primary-b;
        color: #fff;
        width: fit-content;
        margin-bottom: 20rpx;
      }

      .address_info_item {
        margin-bottom: 10rpx;
      }
    }
  }
}

.ability {
  margin: 0 10rpx;
  .has_tip {
    display: block !important;
  }
  margin-bottom: 20rpx;
  .ability_item {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 20rpx 0;
    border-bottom: 1px solid #f6f6f6;
    font-size: 28rpx;
    &:first-child {
      border-radius: 10rpx 10rpx 0 0;
    }
    &:last-child {
      border-bottom: none;
      border-radius: 0 0 10rpx 10rpx;
    }
    .ability_item_box {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10rpx;
      .img {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
      .ability_title {
        font-weight: bold;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        &_tip {
          font-size: 20rpx;
          font-weight: normal;
        }
      }
      .ability_tip {
        color: #cfcfcf;
        font-size: 24rpx;
      }
    }

    .icon {
      // width: 20rpx;
      // margin-left: 30rpx;
      box-sizing: content-box;
    }
  }
}

.Arab .ability .icon {
  margin-left: 0;
  display: flex;
  // width: 40rpx;
}
</style>
